<template>
	<div class="category-detail-container" v-loading="loading">
		<!-- 头部 -->
		<el-card class="mb-6">
			<div class="header-content">
				<h3 class="category-title">{{ categoryData.name }}</h3>
				<div class="action-buttons">
					<el-button type="primary" :icon="Edit" @click="handleEdit">
						编辑分类
					</el-button>
				</div>
			</div>
		</el-card>

		<!-- Main Content -->
		<div class="main-content">
			<!-- Left Content (8 columns) -->
			<div class="left-content">
				<!-- 分类信息 -->
				<el-card>
					<template #header>
						<div class="card-header">
							<span>分类信息</span>
						</div>
					</template>

					<div class="category-info">
						<div class="info-row">
							<div class="info-col">
								<span class="info-label">分类 ID</span>
								<span class="info-value">{{ categoryData.id }}</span>
							</div>
							<div class="info-col">
								<span class="info-label">分类 ID</span>
								<span class="info-value">{{ categoryData.name }}</span>
							</div>
						</div>
					</div>
				</el-card>
			</div>

			<!-- 系统信息 -->
			<div class="right-sidebar">
				<el-card>
					<template #header>
						<div class="card-header">
							<span>系统信息</span>
						</div>
					</template>

					<div class="system-info">
						<div class="info-item">
							<span class="info-label">创建时间</span>
							<span class="info-value">{{ categoryData.createdAt }}</span>
						</div>
						<div class="info-item">
							<span class="info-label">更新时间</span>
							<span class="info-value">{{ categoryData.updatedAt }}</span>
						</div>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'CategoryDetailView'
	};
</script>

<script setup>
	import {
		getCategoriesDetails
	} from '@/api/shoppingCategories.js'
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import {
		Edit,
		Switch
	} from '@element-plus/icons-vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'

	const route = useRoute()
	const router = useRouter()
	const loading = ref(false)
	const categoryId = ref(route.params.id)
	const categoryData = ref({})

	/**
	 * 获取分类详情
	 */
	const fetchCategoryData = async () => {
		loading.value = true
		try {
			console.log(categoryId.value);
			const res = await getCategoriesDetails(categoryId.value)
			if (res.data) {
				categoryData.value = res.data
			}
		} catch (error) {
			console.log(error);
			ElMessage.error('获取分类详情失败')
		} finally {
			loading.value = false
		}
	}

	// 获取分类数据
	onMounted(() => {
		fetchCategoryData()
	})

	// 处理编辑
	const handleEdit = () => {
		router.push(`/categories/edit/${categoryId.value}`)
	}
</script>

<style scoped>
	.category-detail-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		min-height: 0;
		overflow-y: auto;
	}

	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.category-title {
		font-size: 20px;
		font-weight: 600;
		color: #303133;
		margin: 0;
	}

	.action-buttons {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.main-content {
		flex: 1;
		display: flex;
		gap: 20px;
		min-height: 0;
	}

	.left-content {
		flex: 2;
		min-width: 0;
	}

	.right-sidebar {
		flex: 1;
		position: relative;
		max-height: calc(100vh - 200px);
	}

	.card-header {
		font-size: 16px;
		font-weight: 600;
		color: #303133;
	}

	.category-info {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.info-row {
		display: flex;
		gap: 16px;
	}

	.info-col {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.info-label {
		font-size: 14px;
		color: #909399;
	}

	.info-value {
		font-size: 14px;
		color: #606266;
	}

	.system-info {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.mb-6 {
		margin-bottom: 24px;
	}
</style>